<template>
  <div class="header-warp">
    <div class="header">
      <div class="header-title">
        <div class="header-logo">菊花 华为商城</div>
      </div>
      <div class="header-login">
        <img
          class="header-login-item"
          src="https://res9.vmallres.com/shopdc/cdn/modules/nav-top/pc/images/loginIcon.png"
        />
        <template v-if="username">
          <div class="header-login-item">{{username}}</div>
        </template>
        <div class="header-login-item" @click="goLogin">登录</div>
        <div class="header-login-item">|</div>
        <div class="header-login-item" @click="goRegister">注册</div>
        <div class="header-login-item" @click="goCarList">
          <i class="el-icon-shopping-cart-full"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ""
    };
  },
  methods: {
    goRegister() {
      this.$router.push({
        name: "register"
      });
    },
    goLogin() {
      this.$router.push({
        name: "login"
      });
    },
    goCarList() {
      this.$router.push({
        name: 'carts'
      });
    }
  },
  activated() {
    this.username = window.sessionStorage.getItem("username");
  }
};
</script>

<style lang="less" scoped>
  .header-warp {
    background: #282b3e;
    display: flex;
    justify-content: center;
    .header {
      width: 1200px;
      display: flex;
      justify-content: space-between;
    }
    .header-title {
      .header-logo {
        font-size: 22px;
        display: flex;
        align-items: center;
        color: #e6e7e7;
        width: 199.996px;
        height: 58.9955px;
        background: url("")
          repeat;
      }
    }
    .header-login {
      color: #fff;
      display: flex;
      align-items: center;

      .header-login-item {
        margin-right: 8px;
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
</style>>
